<template>

  <div id="start">
    <div class="start_content">
      <header class="start_header">
        <img src="../assets/images/canju.png" /> 用餐人数
      </header>
      <p class="notice">请选择正确的用餐人数 ，小二马上给你送餐具</p>
      <div class="content">
        <ul class="user_list">
          <li
            v-for="item of personNumList"
            :key="item"
          >
            <span>{{item}}</span>
          </li>
        </ul>
        <div class="mark_input">
          <input
            type="text"
            v-model="remark"
            placeholder="请输入您的口味要求，忌口等（可不填）"
          />
        </div>
        <ul class="mark_list">
          <li>
            <span>打包带走</span>
          </li>
          <li>
            <span>
              不要放辣椒
            </span>
          </li>
          <li>
            <span>
              微辣
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div
      id="start"
      class="start"
      @click="start"
    >
      <span>
        开始点菜
      </span>
    </div>
  </div>
</template>


<script>
import Config from '../model/config.js';
import axios from 'axios';
export default {
  data () {
    return {
      api: Config.api,
      remark: '',
      personNum: '',
      tableId: '',
      hasLoading: true,
    }
  },
  methods: {
    // 如果本桌子已经有了点餐信息就直接到首页
    getOrderInfo (tableId) {
      var api = this.api + `/front/order/${tableId}`;
      axios.get(api).then(data => {
        const { code, message, result } = data.data;
        this.hasLoading = false;
        if (Object.is(code, 0) && result) {
          this.$router.push({ path: 'home' });
        } else {
          console.log(message);
        }
      })
    },
    // 开始点餐
    start () {
      console.log('开始点餐', this.$route);
      if (this.personNum && this.tableId) {
        const postData = {
          tableId: this.tableId,
          remark: this.remark,
          personNum: this.personNum,
        };
        var api = this.api + '/front/order/start';
        axios.post(api, postData).then(data => {
          const { code, message } = data.data;
          if (Object.is(code, 0)) {
            this.$router.push({ path: 'home' });
          } else {
            console.log(message);
          }
        })
      } else {
        console.log(this.personNum, this.tableId);
      }
    },
    // 选择就餐人数和口味
    selectPerson () {
      const that = this;
      // 选择人数的dom操作
      const lisDom = document.querySelectorAll('.user_list li');
      for (let i = 0; i < lisDom.length; i++) {
        lisDom[i].onclick = function () {
          for (let j = 0; j < lisDom.length; j++) {
            lisDom[j].className = '';
          }
          this.className = 'active';
          that.personNum = this.querySelector('span').innerHTML.trim();
        }
      }
      // 选择口味的dom操作
      const markLisDom = document.querySelectorAll('.mark_list li');
      for (let i = 0; i < markLisDom.length; i++) {
        markLisDom[i].onclick = function () {
          that.remark = '';
          for (let j = 0; j < markLisDom.length; j++) {
            markLisDom[j].className = '';
          }
          this.className = 'active';
          that.remark = this.querySelector('span').innerHTML.trim()
        }
      }
    }
  },
  computed: {
    personNumList () {
      let result = [];
      for (let i = 1; i <= 12; i++) {
        result.push(`${i}人`);
      }
      return result;
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.selectPerson();
      this.tableId = this.$route.query.tableId || '001';
      window.localStorage.setItem('tableId', this.tableId);
      this.getOrderInfo(this.tableId);
    })
  }
}
</script>

<style lang="scss">
.start_content {
  .start_header {
    height: 3.2rem;
    line-height: 3.2rem;
    background: #000;
    color: #fff;
    width: 10rem;
    margin: 5rem auto 0rem auto;
    border-radius: 0.5rem;
    img {
      height: 2.2rem;
      line-height: 2.2rem;
      position: relative;
      top: 0.5rem;
      margin-left: 1rem;
    }
  }

  .notice {
    color: red;
    text-align: center;
    margin: 1rem 0rem;
  }
  .mark_input {
    padding: 1rem;
    input {
      height: 3rem;
      line-height: 3rem;
      width: 100%;
      outline: none;
    }
  }
  .user_list,
  .mark_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0.5rem;
    li {
      width: 25%;
      padding: 0.5rem;
      box-sizing: border-box; /*盒子的宽度=盒子本身宽度    默认 盒子的宽度=盒子的宽度+padding+border*/
      span {
        display: block;
        width: 100%;
        height: 3.2rem;
        line-height: 3.2rem;
        text-align: center;
        background: #fff;
        border-radius: 0.5rem;
        border: 1px solid #ccc;
      }
    }
    li.active {
      span {
        background: red;
        color: #fff;
        border: 1px solid red;
      }
    }
  }
}

.start {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  margin-left: -3rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: red;
  color: #fff;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  span {
    display: block;
    width: 3rem;
    text-align: center;
    margin: auto;
    cursor: pointer;
  }
}

.load-img {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  img {
    width: 20rem;
    height: 20rem;
    width: 20rem;
    height: 20rem;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
}
.show {
  display: block;
}
.hide {
  display: none;
}
</style>
